<template>
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>id</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="tb" v-for="item in list" :key="item.id">
      <tr>
        <td>{{ item.id }}</td>
        <td>{{ item.bookname }}</td>
        <td>{{ item.author }}</td>
        <td>{{ item.publisher }}</td>
        <td>
          <button @click="delFn(item.id)">删除</button>
          <button
            type="button"
            class="btn btn-primary"
            data-toggle="modal"
            data-target=".bs-example-modal-lg"
            @click="aside(item.bookname, item.author, item.publisher)"
          >
            详情
          </button>
        </td>
      </tr>
    </tbody>
    <input
      type="text"
      placeholder="搜索书本名"
      @keyup.enter="search"
      v-model="bookname"
    />
  </table>
</template>

<script>
export default {
  data() {
    return {
      bookname: "",
    };
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    // obj: {
    //   type: Object,
    //   default: () => ({}),
    // },
  },
  methods: {
    search() {
      // console.log(this.bookname);
      if (this.bookname == "") return alert("请输入内容");
      this.$axios({
        url: "/api/getbooks",
      }).then((res) => {
        console.log(res);
        return (this.$parent.list = res.data.data.filter(
          (ele) => ele.bookname == this.bookname
        ));
        // console.log(this.list);
      });
    },
    delFn(id) {
      console.log(id);
      this.$axios({
        url: "/api/delbook",
        method: "GET",
        params: { id },
      }).then((res) => {
        console.log(res);
      });
      return alert("删除图书成功");
    },
    aside(bookname, author, publisher) {
      // console.log(id);
      // this.$axios({
      //   url: "/api/getbooks",
      //   method: "GET",
      //   data: {
      //     id: id,
      //     bookname: this.bookName,
      //     author: this.bookAuthor,
      //     publisher: this.bookPublisher,
      //   },
      // }).then((res) => {
      //   console.log(res);
      // })
      return alert(`书名:${bookname} 作者：${author}  出版社：${publisher}`);
    },
  },
};
</script>

<style></style>
